.switch_on {

    font-size: 16px;

    width: 40px;

    height: 50px;

    line-height: 50px;

}

.switch_on span,.switch_on input {

    width: 40px;

    height: 50px;

    position: absolute;

    background: none;

    -webkit-appearance: none;

}
/*-webkit-appearance: none; ”改变按钮在不同浏览器中的默认风格*/

/* 默认checked前(on)的样式*/
.switch_on span.input.checked:before {

    border-color: #64bd63;

    box-shadow: #64bd63 0px 0px 0px 16px inset;

    background-color: #64bd63;

    transition: border 0.4s, box-shadow 0.4s, background-color 1.2s;

}

.switch_on span.input:before {

    content: '';

    width: 40px;

    height: 25px;

    border-radius: 20px;

    display: inline-block;

    position: absolute;

    top: 12.5px;

    left: 0;
    
    border: 1px solid #dfdfdf;

    box-shadow: #dfdfdf 0px 0px 0px 0px inset;
    
    background-color: #fdfdfd;

    transition: border 0.4s, box-shadow 0.4s;

    background-clip: content-box;

}

/* checked后的样式*/
.switch_on span.input.checked:after {
    
    left: 15px;
}

.switch_on span.input:after {

    content: '';

    width: 25px;

    height: 25px;

    position: absolute;

    top: 12.5px;

    left: 0;  /*transition之前初始化的left*/

    border-radius: 100%;

    background-color: #fff;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

    transition: left 0.2s;  /*把left从0变成15px*/

}